import React from 'react';
import { observer } from 'mobx-react';
import { Spin } from 'antd';
import {WeaRightMenu,WeaDialog,WeaNewScroll } from 'ecCom';
import * as FnaButton from './FnaButton'

/**
* fna Modal组件：按钮、右键菜单与外部回调函数可配置化的Dialog的实现
  Begin:
    import FnaModal from '../../public/FnaModal'
    import { getFnaIconClass } from '../../util/pulic-func';
  0、内部不依赖store,完全由使用者提供props和content;
  1、funList key == labelList[index][funType]
     key 要和 标签的label的funType相等,自动将按钮和外部函数对应
  使用例子:
  {visible && <FnaModal 
                visible={visible}
                labelList={[ //按钮的名称一级图标
                  {label:'保存',funType:'save',icon:getFnaIconClass('save'),buttonType:'ghost',isMenu:false},
                  {label:'删除',funType:'delete',icon:getFnaIconClass('batchDelete'),buttonType:'primary',isMenu:true},
                  {label:'导出',funType:'saveTo',icon:getFnaIconClass('export'),buttonType:'primary',isMenu:true}
                  .....
                  ]}
                funList={{ //按钮的对应的回调
                  save:()=>console.log("save"),
                  delete:()=>console.log("delete"),
                  saveTo:()=>console.log("saveTo")
                  .....
                }}
                close={()=>{...}} 关闭的回调
                initData={()=>{...}} 打开的初始化回调
                >
                  {selfComponent} 自定义内容
              </FnaModal>
  }
*/

@observer
export default class FnaModal extends React.Component {
	constructor(props) {
        super(props);
  }

  componentDidMount(){
    const { initData } = this.props;
    initData && initData();
  }

  componentWillReceiveProps(nextProps) {
  }

  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

  componentWillUnmount() {
    //组件卸载时一般清理一些状态
    const { resetData } = this.props;
    resetData && resetData();
  }

	render(){
    const { loading = false,
            visible = false,
            title = '财务',
            maskClosable = false} = this.props;
    const { width = 600,
            height = 370,
            scrollHeight = 380} = this.props;

		return(
				<WeaDialog
              icon='icon-coms-Finance'
              iconBgcolor='#f14a2d'
			        title={title}
			        visible={visible}
			        style={{width:width,height:height}}
              maskClosable={maskClosable}
              onCancel={this.handleCancel}
        			buttons={this.getBottomButton()}
              moreBtn={{datas:this.getRightMenu(),collectParams:{favname:title, favouritetype:5}}}
		    >
		    <WeaRightMenu 
          datas={this.getRightMenu()}
          collectParams={{favname:title, favouritetype:5}}
        >    
        
        <Spin spinning={loading}>
          <WeaNewScroll 
              height={scrollHeight}
              onScroll={(e)=>{
              this.setState({
                scrollTop:e.target.scrollTop,
              })
          }}>

            {this.props.children}

          </WeaNewScroll>
        </Spin>
        </WeaRightMenu>
   			</WeaDialog>
		)
	}

  //底部点击按钮
  getBottomButton = () => {
    const { loading,labelList } = this.props;
    let buts=[];
    labelList && labelList.map((item)=>{
      if(item.buttonType === 'ghost'){
        buts.push(FnaButton.getGhostButton(()=>this.handleSubmit(item.funType),loading,item.label));
      } else {
        buts.push(FnaButton.getPrimaryButton(()=>this.handleSubmit(item.funType),loading,item.label));
      }
    });
    
    return buts;
  }
  
  //右键菜单
  getRightMenu = () => {
    const { loading,labelList } = this.props;
    let btns = [];
    labelList && labelList.map((item)=>{
      item.isMenu && btns.push({
              key:item.funType,
              icon: <i className={item.icon}/>,
              content:item.label,
              disabled:loading,
              onClick:()=>{this.handleSubmit(item.funType);}
       });
    });
    
    return btns;
  }
  
  //取消
  handleCancel = () => {
    const { close } = this.props;
    close && close();
  }
  
  //动作执行
  handleSubmit = (funType) => {
    const { funList } = this.props;

    if(typeof funList[funType] === 'function'){
        funList[funType](); 
    } else {
      throw new Error('funType:'+funType+' -> funList和labelList不匹配请检查');
    }
  }
}